<template>
	<view class="boddy">
		<!-- 关注 -->
		<view class="follow">
			<image @click="tomine" :src="info.user.userInfo.avatar" mode=""></image>
			<view class="clifo" @click="changFollow" v-if="info.user.id != userInfo.options.user_id && !info.follow">
				+
			</view>
			<view class="clifo" v-if="info.user.id != userInfo.options.user_id && info.follow">
				√
			</view>
		</view>
		<!-- 喜欢 -->
		<view class="m-icon" @click="changeLike">
			<image v-show="info.like" src="../../../../static/image/like.png" mode="widthFix" />
			<image v-show="!info.like" src="../../../../static/image/no-like.png" mode="widthFix" />
			<text>{{info.videoLikesNums}}</text>
		</view>
		<!-- 收藏 -->
		<view class="m-icon" @click="changeStar">
			<image v-show="info.star" src="../../../../static/image/coll.png" mode="widthFix" />
			<image v-show="!info.star" src="../../../../static/image/col.png" mode="widthFix" />
			<text>{{info.videoColsNums}}</text>
		</view>
		<!-- 评论 -->
		<view class="m-icon" @click="showCommentModal">
			<image src="../../../../static/image/comment.png" mode="widthFix"></image>
			<text>{{info.commentNum}}</text>
		</view>
		<!-- 转发 -->
		<button class="m-icon" open-type="share" v-if="!canward">
			<image src="../../../../static/image/video-share.png" mode="widthFix"></image>
			<!-- <text>{{info.forwardNums}}</text> -->
		</button>

		<!-- 评论弹窗 -->
		<popup-comment ref="popupComment" />
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import utils from '../utils.js';
	import popupComment from './popupComment.vue';

	export default {
		components: {
			popupComment
		},
		props: {
			itemInfo: {
				type: Object,
				default: function() {
					return {
						like: false,
						videoLikesNums: 0,
						commentNum: 0,
						follow: false,
						star: false,
						videoColsNums: 0,
						forwardNums: 0
					}
				}
			},
			canward: {
				type: Boolean,
				default: function() {
					return false
				}
			},
			targetype: {
				type: Number,
				default: function() {
					return -1
				}
			}
			// swilist: Array
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
		},
		data() {
			return {
				info: JSON.parse(JSON.stringify(this.itemInfo))
			}
		},

		watch: {
			itemInfo: {
				deep: true,
				handler() {
					this.$set(this.$data, 'info', JSON.parse(JSON.stringify(this.itemInfo)));
				}
			},
			/* canward:{
				deep: true,
				handler() {
					console.log(this.canward);
				}
			} */
			/* swilist: {
				deep: true,
				handler() {
					this.$set(this.$data, 'info', JSON.parse(JSON.stringify(this.itemInfo)));
				}
			}, */
		},
		methods: {
			tomine() {
				uni.navigateTo({
					url: '/plugins/sixty/user-center/user-center?user_id=' + this.info.user.id + '&mall_id=' +
						this.info.mall_id
				})
			},
			changFollow() {
				if (this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken ===
					null) {
					this.$store.dispatch('user/accessToken');
					return;
				}
				this.$set(this.info, 'follow', true);
				this.addFollow();
			},
			changeLike() {
				if (this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken ===
					null) {
					this.$store.dispatch('user/accessToken');
					return;
				}
				// 视觉修改
				if (this.info.like) {
					this.$set(this.info, 'videoLikesNums', parseInt(this.info.videoLikesNums) - 1);
					this.cancleLike();
				} else {
					this.$set(this.info, 'videoLikesNums', parseInt(this.info.videoLikesNums) + 1);
					this.addLike()
				}
				this.$set(this.info, 'like', !this.info.like);
			},
			changeStar() {
				if (this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken ===
					null) {
					this.$store.dispatch('user/accessToken');
					return;
				}
				// 视觉修改
				if (this.info.star) {
					this.$set(this.info, 'videoColsNums', parseInt(this.info.videoColsNums) - 1);
					this.canclect();
				} else {
					this.$set(this.info, 'videoColsNums', parseInt(this.info.videoColsNums) + 1);
					this.addclect()
				}
				this.$set(this.info, 'star', !this.info.star);
			},
			// 展示评论弹框
			showCommentModal() {
				this.$refs.popupComment.showPopup(this.itemInfo, this.targetype);
			},
			addFollow: utils.debounce(function() {
				let url = this.$siteInfo.apiroot + '?_mall_id=' + this.info.mall_id + '&r=' + this.$apiUrl.sixty
					.addfollow
				this.$request({
					url: url,
					data: {
						target_id: this.info.user.id
					},
					method: 'post'
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					console.log(err);
				})
			}, 500),
			addLike: utils.debounce(function() {
				let url = this.$siteInfo.apiroot + '?_mall_id=' + this.info.mall_id + '&r=' + this.$apiUrl.sixty
					.like
				this.$request({
					url: url,
					data: {
						video_id: this.targetype != -1 ? this.info.video_id : this.info.id
					},
					method: 'post'
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					console.log(err);
				})
			}, 500),
			cancleLike: utils.debounce(function() {
				let url = this.$siteInfo.apiroot + '?_mall_id=' + this.info.mall_id + '&r=' + this.$apiUrl.sixty
					.delike
				this.$request({
					url: url,
					data: {
						video_id: this.targetype != -1 ? this.info.video_id : this.info.id
					},
					method: 'post'
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					console.log(err);
				})
			}, 500),
			addclect: utils.debounce(function() {
				let url = this.$siteInfo.apiroot + '?_mall_id=' + this.info.mall_id + '&r=' + this.$apiUrl.sixty
					.collect
				this.$request({
					url: url,
					data: {
						video_id: this.targetype != -1 ? this.info.video_id : this.info.id
					},
					method: 'post'
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					console.log(err);
				})
			}, 500),
			canclect: utils.debounce(function() {
				let url = this.$siteInfo.apiroot + '?_mall_id=' + this.info.mall_id + '&r=' + this.$apiUrl.sixty
					.delcollect
				this.$request({
					url: url,
					data: {
						video_id: this.targetype != -1 ? this.info.video_id : this.info.id
					},
					method: 'post'
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					console.log(err);
				})
			}, 500),
			// 防抖进行接口请求
			postChangeLike: utils.debounce(function() {
				let url = this.$siteInfo.apiroot + '?_mall_id=' + this.info.mall_id + '&r=' + this.$apiUrl.sixty
					.like
				this.$request({
					url: url,
					data: {
						video_id: this.targetype != -1 ? this.info.video_id : this.info.id
					},
					method: 'post'
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.itemInfo.like = this.info.like;
					} else if (res.code == 1) {
						// this.$request({
						// 	url: this.$api.sixty.delike,
						// 	data: {
						// 		video_id: this.targetype != -1 ? this.info.video_id : this.info.id
						// 	},
						// }).then(res => {
						// 	if(res.code == 0){
						// 		uni.showToast({
						// 			title: res.msg,
						// 			icon: 'none'
						// 		});
						// 		this.itemInfo.like = this.info.like;
						// 	}
						// 	// this.itemInfo.videoLikesNums = this.info.videoLikesNums = res.videoLikesNums;
						// }).catch(err => {
						// 	console.log(err);
						// })
					}
					// this.itemInfo.videoLikesNums = this.info.videoLikesNums = res.videoLikesNums;
				}).catch(err => {
					console.log(err);
				})
			}, 500),
		}
	}
</script>

<style scoped lang="scss">
	.boddy {
		position: absolute;
		right: 50rpx;
		bottom: 500rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.follow {
		width: 90rpx;
		height: 90rpx;
		position: relative;
		border-radius: 50%;
		border: 6rpx solid #000;

		image {
			width: 78rpx;
			height: 78rpx;
			// width: 100%;
			// height: 100%;
			border-radius: 50%;
		}

		.clifo {
			position: absolute;
			left: 50%;
			bottom: -12rpx;
			color: #ffffff;
			background: #ff0000;
			width: 32rpx;
			height: 32rpx;
			border-radius: 36rpx;
			line-height: 32rpx;
			text-align: center;
			font-weight: bold;
			transform: translateX(-50%);
			font-size: 28rpx;
		}
	}

	.m-icon {
		margin-top: 36rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		background: none;
		padding: 0;

		image {
			width: 64rpx;
		}

		text {
			color: #fff;
		}
	}

	// .m-icon+.m-icon {
	// 	margin-top: 36rpx;
	// }
</style>
